var visitors = document.querySelector('.conment .visitors')
var visitors_ech = echarts.init(visitors)
//绘制visitors
visitors_ech.setOption({
    legend:{
        top : 380,
        left:500 
    },
    xAxis:{
        data:['18th' , '20th' , '22th' , '24th' , '26th' , '28th' , '30th']
    },
    yAxis:{
        // num:['20','40','60','80','100','120','140','160','180','200'] ,
        splitLine:{
            show:true
        }
    },
    series:[
        {
            name : 'This Week',
            type : 'line',
            data : [100,120,170,170,181,181,160],
            smooth:true,
            symbolSize:7,
            symbol:'circle',
            itemStyle:{
                normal:{
                    color :'blue'
                }
            }
        },
        {
            name : 'Last Week',
            type : 'line',
            data : [60,80,75,75,80,80,100],
            smooth:true,
            symbolSize:7,
            symbol:'circle',
            itemStyle:{
                normal:{
                    color :'#717278'
                }
            }
        }
    ]
})
var sales = document.querySelector('.conment .sales')
var sales_ech = echarts.init(sales)
sales_ech.setOption({
    legend:{
        top : 380,
        left:500 
    },
    xAxis:{
        data:['JUN' , 'JUL' , 'AUG' , 'SEP' , 'OCT' , 'NOV' , 'DEC']
    },
    yAxis:{
        splitLine:{
            show:true
        }
    },
    series:[
        {
            name:'This year',
            barWidth:20,
            color:'blue',
            type:'bar',
            data:[1000 ,  2000 , 3000 , 2500 , 2700 , 2400 , 3000]
        },
        {
            name:'Last year',
            barWidth:20,
            color:'green',
            type:'bar',
            data:[800 ,  1800 , 2700 , 2000 , 1850 , 1500 , 2000]
        }
    ]
})
var tbody = document.querySelector('.data table tbody')
function render (data){
    data.map((item) => {
        tbody.innerHTML += 
            `<tr>
                <td>${item.product}</td>
                <td>${item.price}</td>
                <td>${(item.res ? '↑' : '↓')+' '+ item.num + '%' + ' ' + item.sales + 'Sold'}</td>
                <td>$</td>
            </tr>`
    })
}

render(data.list)